<template>
    <div class="upload">
        <a-upload
            v-if="uploadType === 'image'"
            name="file"
            list-type="picture-card"
            class="avatar-uploader"
            :action="url"
            :show-upload-list="true"
            :multiple="multiple"
            :file-list="files"
            :headers="headers"
            :before-upload="beforeUpload"
            :remove="remove"
            @change="handleChange"
        >
            <div v-if="multiple || (!multiple && files.length === 0)">
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">
                    上传
                </div>
            </div>
        </a-upload>
        <a-upload
            v-if="uploadType === 'file'"
            name="file"
            list-type="text"
            class="avatar-uploader"
            :action="url"
            :show-upload-list="true"
            :multiple="multiple"
            :file-list="files"
            :headers="headers"
            :before-upload="beforeUpload"
            :remove="remove"
            @change="handleChange"
        >
            <a-button v-if="multiple || (!multiple && files.length === 0) || showButton">
                <a-icon type="upload" /> {{ button }}
            </a-button>
        </a-upload>
    </div>
</template>

<script>
import { ACCESS_TOKEN } from '@/store/mutation-types'
import storage from 'store'
export default {
    name: 'UploadImage',
    props: {
        multiple: {
            type: Boolean,
            default: false
        },
        size: {
            type: Number,
            default: 3
        },
        type: {
            type: String,
            default: 'image/jpeg,image/png'
        },
        images: {
            type: Array,
            default: () => []
        },
        path: {
            type: [String, Array],
            default: () => {
            }
        },
        uploadType: {
            type: String,
            default: 'image'
        },
        button: {
            type: String,
            default: '上传'
        },
        showButton: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            loading: false,
            url: `${process.env.VUE_APP_API_BASE_URL}/api/file/upload`,
            headers: {
                Authorization: `U66v7sMAdZvb ${storage.get(ACCESS_TOKEN)}`
            },
            imageUrl: '',
            files: [],
            currentIndex: 0
        }
    },
    created() {
        this.getFiles()
    },
    watch: {
        images() {
            this.getFiles()
        }
    },
    methods: {
        getFiles() {
            this.files = this.images.map(value => {
                return {
                    name: value,
                    uid: Date.now() * Math.random(),
                    url: value
                }
            })
        },
        beforeUpload(file) {
            const types = this.type.split(',')
            if (types.indexOf(file.type) === -1) {
                this.$message.error(`上传的类型必须是${this.type}`)
                return false
            }
            const isLt2M = file.size / 1024 / 1024 < this.size
            const title = this.uploadType === 'image' ? '图片' : '视频'
            if (!isLt2M) {
                this.$message.error(`上传的${title}不能大于${this.size}MB`)
                return false
            }
            return true
        },
        remove(file) {
            this.currentIndex = this.files.indexOf(file)
            this.loading = true
        },
        handleChange({ file, fileList }) {
            this.files = fileList
            if (file.status === 'removed') {
                if (this.multiple) {
                    const path = [...this.path]
                    path.splice(this.currentIndex, 1)
                    this.$emit('update:path', path)
                } else {
                    this.$emit('update:path', '')
                }
                this.loading = false
                return true
            }
            if (file.status !== 'done') {
                this.loading = true
            } else {
                // eslint-disable-next-line camelcase
                const { response: { data: { url } } } = file

                if (this.multiple) {
                    const path = [...this.path, url]
                    this.$emit('update:path', path)
                    this.$emit('upload', path)
                } else {
                    this.$emit('update:path', url)
                    this.$emit('upload', url)
                }
                this.loading = false
            }
        }
    }
}
</script>

<style scoped>

</style>
